<template>
  <div class="map-container">
    <div id="map" ref="mapContainer" class="map"></div>
    <div class="map-overlay">
      <div class="map-title">辖区地图</div>
      <div class="map-stats">
        <div class="stat-item">
          <div class="label">巡逻点位</div>
          <div class="value">24</div>
        </div>
        <div class="stat-item">
          <div class="label">监控点位</div>
          <div class="value">128</div>
        </div>
        <div class="stat-item">
          <div class="label">警务站</div>
          <div class="value">3</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataMap',
  data() {
    return {
      map: null,
      center: [98.508333, 39.741111], // 酒泉市肃州区中心坐标
      markers: [
        {
          position: [98.513889, 39.744444], // 金泉路社区大致位置
          title: '金泉路社区',
          content: '金泉路社区警务工作站'
        }
      ]
    }
  },
  mounted() {
    // 确保TMap已加载
    if (window.TMap) {
      this.initMap()
    } else {
      // 如果TMap未加载，等待加载完成
      const checkTMap = setInterval(() => {
        if (window.TMap) {
          clearInterval(checkTMap)
          this.initMap()
        }
      }, 100)
    }
  },
  methods: {
    initMap() {
      if (!window.TMap) return
      
      // 创建地图实例
      this.map = new window.TMap.Map('map', {
        center: new window.TMap.LatLng(this.markers[0].position[1], this.markers[0].position[0]),
        zoom: 16,  // 设置更大的缩放级别以显示街道级别
        pitch: 30, // 添加一定的倾斜角度
        rotation: 0,
        viewMode: '2D',
        baseMap: {
          type: 'vector',
          features: ['base', 'building3d', 'point', 'road'],  // 添加所有地图要素
          showLabel: true,  // 显示地图文字
          labelStyle: {
            // 'point-of-interest': {  // 兴趣点标签样式
            //   color: '#00c6ff',
            //   size: 14,
            //   weight: 'normal',
            //   stroke: {
            //     color: 'rgba(0,24,48,0.8)',
            //     width: 2
            //   }
            // },
            'road': {  // 道路标签样式
              color: '#7eb9ff',
              size: 13,
              weight: 'normal',
              stroke: {
                color: 'rgba(0,24,48,0.8)',
                width: 2
              }
            },
            'building': {  // 建筑物标签样式
              color: '#7eb9ff',
              size: 12,
              weight: 'normal',
              stroke: {
                color: 'rgba(0,24,48,0.8)',
                width: 2
              }
            }
          }
        }
      })

      // 添加标记点
      new window.TMap.MultiMarker({
        map: this.map,
        styles: {
          "marker": new window.TMap.MarkerStyle({
            width: 30,
            height: 30,
            anchor: { x: 15, y: 30 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
          })
        },
        geometries: [{
          "id": 'community',
          "styleId": 'marker',
          "position": new window.TMap.LatLng(this.markers[0].position[1], this.markers[0].position[0]),
          "properties": {
            "title": "金泉路社区"
          }
        }]
      })

      // 添加文字标记
      new window.TMap.MultiLabel({
        map: this.map,
        styles: {
          "label": new window.TMap.LabelStyle({
            color: '#00c6ff', // 文字颜色
            size: 16, // 文字大小增加
            weight: 'bold', // 加粗显示
            offset: { x: 0, y: -35 }, // 文字偏移
            backgroundColor: 'rgba(0,24,48,0.8)', // 文字背景色
            padding: { top: 6, right: 10, bottom: 6, left: 10 }, // 文字内边距增加
            borderRadius: 4, // 文字背景圆角
            borderWidth: 1, // 文字边框宽度
            borderColor: 'rgba(0,198,255,0.3)', // 文字边框颜色
            stroke: { // 文字描边
              color: 'rgba(0,24,48,0.8)',
              width: 2
            }
          })
        },
        geometries: [{
          "id": 'community-label',
          "styleId": 'label',
          "position": new window.TMap.LatLng(this.markers[0].position[1], this.markers[0].position[0]),
          "content": "金泉路社区",
        }]
      })

    //   // 添加信息窗
    //   new window.TMap.InfoWindow({
    //     map: this.map,
    //     position: new window.TMap.LatLng(this.markers[0].position[1], this.markers[0].position[0]),
    //     content: '<div style="padding: 10px; background: rgba(0,24,48,0.9); border: 1px solid rgba(0,198,255,0.3); border-radius: 4px; color: #00c6ff;">' +
    //              '<h4 style="margin: 0 0 5px 0;">金泉路社区</h4>' +
    //              '<p style="margin: 0; font-size: 12px; color: #7eb9ff;">社区面积: 2.5平方公里<br>常住人口: 19,272人<br>小区楼院: 25个</p>' +
    //              '</div>',
    //     offset: { x: 0, y: -30 }
    //   })
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: calc(100% - 300px);
  min-height: 500px;
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
  background: rgba(0, 24, 48, 0.3);
}

.map-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 24, 48, 0.8);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  padding: 15px;
  z-index: 100;
}

.map-title {
  font-size: 18px;
  color: #00c6ff;
  margin-bottom: 15px;
}

.map-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-item .label {
  font-size: 14px;
  color: #7eb9ff;
  margin-bottom: 5px;
}

.stat-item .value {
  font-size: 24px;
  color: #00c6ff;
}
</style> 